import React, { Component, createRef } from 'react'
import { Card } from "antd"
import img1 from '../../assert/images/1.png'      
import img2 from '../../assert/images/2.png'      
import img3 from '../../assert/images/3.png'      
import img4 from '../../assert/images/4.png'
import echarts from "echarts"
// 引入表格
import Taable from "./table"
export default class Dashboard extends Component {
  inputRef = createRef()
  
  state = {
    headerData:[
      {name: '今日挂号人次', today: 56, id: 1, yesterday: 26, img: img1, color: '#f0f1fd'},
      {name: '今日接诊人次', today: 75, id: 2, yesterday: 60, img: img2, color: '#fff0f0'},
      {name: '今日收入合计', today: 6500, id: 3, yesterday: 5000, img: img3, color: '#eafaf5'},
      {name: '今日新增会员', today: 20, id: 4, yesterday: 22, img: img4, color: '#fffae9'}
    ]
  }
  // 组件挂载
  componentDidMount() {
    const myChart = echarts.init(document.getElementById('main'))
    const myRaduies = echarts.init(document.getElementById('raduiss'))

    myChart.setOption({
      title: {
          text: '单位（元）'
      },
      tooltip: {},
      xAxis: {
          data: ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06','12-07']
      },
      yAxis: {},
      series: [{
          name: '销量',
          type: 'bar',
          data: [3000, 2564, 3600, 5000, 1250, 4000,4500]
      }]
    })
    myRaduies.setOption({
      tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
          orient: 'vertical',
          left: 10,
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
      },
      series: [
          {
              name: '消费比例',
              type: 'pie',
              radius: ['45%', '70%'],
              avoidLabelOverlap: false,
              label: {
                  show: false,
                  position: 'center'
              },
              emphasis: {
                  label: {
                      show: true,
                      fontSize: '30',
                      fontWeight: 'bold'
                  }
              },
              labelLine: {
                  show: false
              },
              data: [
                  {value: 3700, name: '会员消费'},
                  {value: 1700, name: '非会员消费'}
              ]
          }
      ]
    })
  }

  // 绘制卡片
  _renderCards = (items) => {
    return items.map(item => {
      return (<Card key={item.id} style={{ width: 330, maxHeight:'200', borderRadius:'15px'}}>
        <div style={{display:'flex'}}>
          <div>
            <p style={{fontSize:'42px',fontWeight:'700'}}>{item.today}</p>
            <p>{item.name}</p>
            <p>较昨日{ item.yesterday > item.today ? '下降' : '增加' }{' '+Math.ceil(((item.today-item.yesterday) / item.yesterday) * 100) + '%'}</p>
          </div>
          <div style={{margin:'20px 0',marginLeft: '50px',background:item.color, width:'60px',height:'60px',borderRadius:'50%'}}>
            <img style={{marginTop:'20px',marginLeft:'15px'}} src={item.img} alt=""/>
          </div>
        </div>
      </Card>)
    })
  }
  
  render() {
    return (
      <div>
        {/* 上半部分卡片 */}
        <div style={{display:'flex',justifyContent:'space-around'}}>
        {
          this._renderCards(this.state.headerData)
        }
        </div>
        {/* 中部图片 */}
        <div style={{display:'flex',justifyContent:'space-around'}}>
          <Card style={{ width: 950,marginTop:'30px',borderRadius:'15px'}}>
            <div>
              <div style={{ width: 900,borderBottom:'3px solid #f2f2f2',marginLeft:'-26px',textIndent:'23px',paddingBottom:'10px',fontWeight:600}}>
                <div>诊所收入趋势</div>
                <div></div>
              </div>
              <div id="main" style={{height: 400,marginTop:'20px'}}></div>
            </div>
          </Card>
          <Card style={{width: 400,marginTop:'30px',borderRadius:'15px'}}>
            <div>
              <div>
                <div style={{borderBottom:'3px solid #f2f2f2',paddingBottom:'10px',fontWeight:600}}>今日会员消费占比</div>
              </div>
              <div id="raduiss" style={{height: 400}}></div>
              <div>
                <div>会员占比：</div>
                <div>非会员占比：</div>
              </div>
            </div>
          </Card>
        </div>
        {/* 下面部分 */}
        <Card style={{width: 1380,marginTop:'30px',marginLeft: '10px',borderRadius:'15px'}}>
          <div>
            <div style={{ width: 1380,borderBottom:'3px solid #f2f2f2',marginLeft:'-26px',fontWeight:'600',textIndent:'20px'}}>今日门诊记录</div>
          </div>
          <div style={{marginTop:'30px'}}>
            <Taable/>
          </div>
        </Card>
      </div>
    )
  }
}